<template>
  <view class="form-cont" v-if="form">
    <u-calendar v-model="showDate" mode="date" @change="dateChange"></u-calendar>
    <u-select v-model="showSelect" :list="selectList" @confirm="selectConfim"></u-select>
    <template  v-for="(item,index) in formContent" >
      <!--单行文本-->
      <view class="form-col" v-if="item.__config__.tagIcon==='input'" :key="index">
        <text>{{item.__config__.label}}</text>
        <text>{{form[item.__vModel__]}}</text>
      </view>

      <!--多行文本-->
      <view v-if="item.__config__.tagIcon==='textarea'" :key="index" class="flex-col form-col" style="flex-direction: column;justify-content: flex-start;">
        <text style="text-align: left;justify-content: flex-start;width: 100%;">{{item.__config__.label}}</text>
        <textarea auto-height maxlength="200" v-model="form[item.__vModel__]" disabled  placeholder="请输入最多200个字符…" placeholder-class="inputClass"></textarea>
      </view>

      <!--计数-->
      <view class="form-col" v-if="item.__config__.tagIcon==='number'" :key="index">
        <text>{{item.__config__.label}}</text>
        <text>{{form[item.__vModel__]}}</text>
        <!--<u-number-box class="num-box" v-model="form[item.__vModel__]" @change="valNumChange($event,item.__vModel__)"></u-number-box>-->
      </view>

      <!--日期选择-->
      <view class="form-col" v-if="item.__config__.tagIcon==='date'" :key="index">
        <text>{{item.__config__.label}}</text>
        <view>
          <text>{{form[item.__vModel__]}}</text>
        </view>

      </view>

      <!--下拉选择-->
      <view class="form-col" v-if="item.__config__.tagIcon==='select'" :key="index">
        <text>{{item.__config__.label}}</text>
        <view>
          <text>{{form[item.__vModel__]}}</text>
        </view>
      </view>

      <!--单选-->
      <view class="form-col" v-if="item.__config__.tagIcon==='radio'" :key="index">
        <text>{{item.__config__.label}}</text>
        <text>{{form[item.__vModel__]}}</text>
      </view>

      <!--多选-->
      <view class="form-col" v-if="item.__config__.tagIcon==='checkbox'" :key="index" >
        <text class="form-check-group-t">{{item.__config__.label}}</text>
        <text>{{form[item.__vModel__]}}</text>
      </view>
    </template>


  </view>
</template>

<script>
export default {
  name:"ParserInfo",
  props:{
    formContent:{
      default: [],
      type:Array,
    },
    form:{
      default: null,
      type:Object
    }
  },
  data() {
    return {
      clickModel:'',
      showSelect:false,
      showDate:false,
      selectList:[],
      selectVal:''
    };
  },
  created(){
    console.log( this.formContent)
    if (this.formContent){
      //this.form = this.initForm()
    }
  },
  methods:{
    initForm(){
      let obj={}
      this.formContent.forEach(item=>{
        obj[item.__vModel__]=""
      })
      return obj
    },
    checkboxChange(e,model){
      this.form[model]=e.detail.value.toString()
    },
    vaccinationChange(e,model){
      this.form[model]=e.detail.value
    },
    showDateChangeFn(model){
      this.clickModel=model
      this.showDate=true
    },
    dateChange(e){
      this.form[this.clickModel]=e.result
    },
    valNumChange(e,model){
      this.form[model]= e.value
    },
    showSelectFn(model,item){
      this.clickModel=model
      this.selectList=item.__slot__.options
      this.showSelect=true
    },
    selectConfim(e){
      this.form[this.clickModel]=e[0].label
    }
  }
}
</script>

<style lang="scss" scoped>

.form-cont {
  font-size: 28rpx;
  font-family: PingFang-SC-Medium, PingFang-SC;
  font-weight: 500;
  color: #999;
  box-sizing: border-box;
  border-radius: 12rpx;
  background: #FFFFFF;
  overflow: hidden;
  width: 100%;
  height: 100%;
  margin-bottom: 20rpx;

  .form-col {
    padding: 28rpx 0 30rpx;
    // border-bottom: 1upx solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    position: relative;
    &::after{
      content: "";
      position: absolute;
      width: 100%;
      height: 1px;
      bottom: 0;
      left: 0;
      background-color: #eee;
      transform: scaleY(0.5);
    }

  }

  .form-col:last-child{
    padding-bottom: 0;
    &::after{
      display: none;
    }

  }

  text:nth-child(1) {
    display: inline-block;
    height: 100%;
  }

  text:nth-child(2) {
    display: inline-flex;
    flex-grow: 1;
    text-align: end;
    justify-content: flex-end;
    align-items: center;
    font-size: 28rpx;
    border: none;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    text-align: end;
    .u-icon{
      padding: 0;
      position: relative;
      transform: translateY(-3rpx);
    }
  }


  uni-radio-group{
    uni-label{
      margin-left: 20rpx;
    }
    /deep/ .uni-radio-input-checked{
      background: #44D94B;
    }
    .uni-radio-input{
      margin-right: 4rpx;
      width: 28rpx;
      height: 28rpx;
    }
  }

  radio-group{
    label{
      margin-left: 20rpx;
    }
    radio{
      margin-right: 4rpx;
      width: 28rpx;
      height: 28rpx;
    }
  }

  textarea {
    width: 100%;
    margin-top: 20rpx;
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    min-height: 200rpx;
  }


  /deep/ .uni-textarea-wrapper {
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 40rpx;
  }

  /deep/ .uni-textarea-placeholder {
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
    line-height: 40rpx;
  }

  textarea {
    margin-top: 20rpx;
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
  }




  text {
    font-size: 28rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    color: #666666;
    line-height: 40rpx;
  }

  input {
    text-align: right;
  }

  /deep/ .input-placeholder {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    font-size: 24rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
  }

  /deep/ .uni-input-input {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    text-align: right;
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
  }

  /deep/ .uni-textarea-wrapper {
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 40rpx;
  }

  /deep/ .uni-textarea-placeholder {
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
    line-height: 40rpx;
  }

  textarea {
    margin-top: 20rpx;
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
  }

  text {
    font-size: 28rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    color: #666666;
    line-height: 40rpx;
  }
}

.form-check-group{
  display: flex;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;

  view:after{
    display: none;
  }
  view{
    padding: 0;
  }
  .form-check-group-t{
    display: block;
    margin-bottom: 20rpx;
  }

  .chck-col{
    display: inline-flex;
    align-items: center;
    margin-right: 20rpx;
    /deep/ .uni-checkbox-input{
      width: 30rpx;
      height: 30rpx;
    }
    /deep/ .uni-checkbox-input-checked{
      width: 30rpx;
      height: 30rpx;
      &:before{
        font-size: 24rpx;
      }
    }

    .c-label{
      padding-top: 4rpx;
    }
  }

  /deep/ .u-number-input{
    border: none !important;
  }

}
</style>
